<template>
  <div>
    <el-input v-model="value"></el-input>
    <el-divider content-position="left">深度监听</el-divider>
    <el-input v-model="formData.name.value"></el-input>
  </div>
</template>

<script>
export default {
  name: "Demo_4",
  data() {
    return {
      value: "初始值",
      formData: {
        name: {
          value: "默认值",
        },
      },
    };
  },
  watch: {
    value(newVal, oldVal) {
      console.log(newVal, oldVal);
    },
    // 深度监听
    formData: {
      handler(newVal, oldVal) {
        console.log("深度监听", newVal, oldVal);
      },
      deep: true, // 监听对象内部的改变
      immediate: true, // 立即执行
    },
  },
  mounted() {},
  methods: {},
};
</script>
